﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <!--查询-->
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入院区名称" name="campusName" class="layui-input">
            </div>
            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search"> 查询</button>
        </div>
    </form>
    <!-- 表格-->
    <table class="layui-hide" id="role-table"></table>
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a> 
            @* <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="update">修改</a> *@
        </div>
    </script>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer', 'laypage', 'form', 'laydate'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var laypage = layui.laypage;
            var form = layui.form;
            var laydate = layui.laydate;
            var totalCount=0;
            // 日期时间选择器
            laydate.render({
                elem: '#date',
                trigger: 'click'
            });

            // 初始化表格
            table.render({
                elem: '#role-table',
                id: 'TitleManagetable',
                height: 500,
                cols: [[
                    { field: 'hospitalNavigationId', width: 80, sort: true, fixed: 'left', title: 'ID' },
                    { field: 'campusName', width: 130, title: '医院名称' },
                    { field: 'contactNumber', width: 130, title: '联系方式' },
                    { field: 'publicTransit', width: 130, title: '公交' },
                    { field: 'addressCampus', width: 130, title: '导航地址' },
                    { field: 'createTime', width: 130, title: '创建时间' },
                    { field: 'campusStatus', title: '状态', width: 160, templet: function (d) {
                            return '<input type="checkbox" name="status" value="' + d.hospitalNavigationId + '" lay-skin="switch" lay-text="开启|关闭" lay-filter="switchStatus" ' + (d.campusStatus? 'checked' : '') + '>';
                        } },
                    { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                ]],
                page: true, // 开启分页
                limit: 15, // 默认每页显示15条
                limits: [2, 15, 30, 50] // 可选每页显示条数
            });

            // 封装 API 调用函数
            function getTitleManagementList(PageIndex, PageSize, campusName) {
                return new Promise((resolve, reject) => {
                    var params = {
                        PageIndex: PageIndex || 1, // 默认第一页
                        PageSize: PageSize || 15,   // 默认每页15条
                        CampusName: campusName
                    };

                    $.ajax({
                        //url: 'https://localhost:7171/api/HospitalNavigation/GetHospitalNavigation',
                        url: `@ViewBag.BaseUrl/T5/HospitalNavigation/GetHospitalNavigation`,
                        data: params,
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            resolve(res);
                        },
                        error: function (xhr, status, error) {
                            reject({ status, error, responseText: xhr.responseText });
                        }
                    });
                });
            }

            // 删除
            function deleteTitleManagement(HospitalNavigationId) {
                return new Promise((resolve, reject) => {
                    // 修正 URL 中的参数格式
                    $.ajax({
                        //url: `https://localhost:7027/api/HospitalNavigation/DeletedHospitalNavigation?HospitalNavigationId=${HospitalNavigationId}`,
                        url: `@ViewBag.BaseUrl/T6/HospitalNavigation/DeletedHospitalNavigation?HospitalNavigationId=${HospitalNavigationId}`,
                        type: 'POST',
                        dataType: 'json',
                        success: function (res) {
                            resolve(res);
                        },
                        error: function (xhr, status, error) {
                            reject({ status, error, responseText: xhr.responseText });
                        }
                    });
                });
            }

            // 修改
            function update(HospitalNavigationId) {
                // 将 HospitalNavigationId 存储到 localStorage
                localStorage.setItem("HospitalNavigationId", HospitalNavigationId);
                // 跳转到修改页面
                location.href = '/HospitalNavigation/UpdateHospitalNavigation';
            }

            function loadRoleData(PageIndex, PageSize) {
                layer.load(2);
                var campusName = $('[name="campusName"]').val();
                getTitleManagementList(PageIndex, PageSize, campusName)
                   .then(res => {
                        layer.closeAll('loading');
                        if (res.code === 0) {
                            totalCount=res.totalCount;
                            table.reload('TitleManagetable', {
                                data: res.data,
                                count: res.totalCount,
                                limit: PageSize || 15,
                                curr: PageIndex || 1
                            });

                            // 分页
                            laypage.render({
                                elem: 'role-table-page',
                                count: res.totalCount, // 数据总数
                                curr: PageIndex,
                                limit: PageSize,
                                limits: [2, 15, 30, 50],
                                layout: ['count', 'prev', 'page', 'next', 'limit','refresh','skip'],
                                jump: function (obj, first) {
                                    if (!first) {
                                        loadRoleData(obj.curr, obj.limit);
                                    }
                                }
                            });
                        } else {
                            layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    })
                   .catch(error => {
                        layer.closeAll('loading');
                        layer.msg('请求失败: ' + error.error, { icon: 2 });
                        console.error('Ajax请求失败:', error);
                    });
            }

            // 页面加载完成后获取数据
            loadRoleData(1, totalCount);

            // 表单提交事件
            form.on('submit(search)', function () {
                loadRoleData();
                return false;
            });

            // 监听表格工具条事件
            table.on('tool(TitleManagetable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    layer.confirm('确认要删除这条记录吗？', {
                        btn: ['确定', '取消']
                    }, function () {
                        layer.load(2);
                        deleteTitleManagement(data.hospitalNavigationId)
                           .then(res => {
                                layer.closeAll('loading');
                                if (res.code === 100) {
                                    layer.alert(res.message || '删除成功', {
                                        title: '删除成功',
                                        icon: 1,
                                        btn: ['确定'],
                                        yes: function (index, layero) {
                                            layer.close(index);
                                            loadRoleData(); // 刷新表格数据
                                        }
                                    });
                                } else {
                                    layer.alert(res.message || '删除失败', {
                                        title: '删除失败',
                                        icon: 2
                                    });
                                }
                            })
                           .catch(error => {
                                layer.closeAll('loading');
                                layer.alert('请求失败: ' + error.error, {
                                    title: '错误',
                                    icon: 2,
                                    btn: ['确定']
                                });
                                console.error('AJAX请求失败:', error);
                            });
                    });
                } else if (obj.event === 'update') {
                    update(data.hospitalNavigationId);
                }
            });
        });

 
    </script>
</body>

</html>